<template>
  

    <el-header class="header fixed-top">
   <el-row type="flex" justify="space-between" align="middle" class="header-row">
     <el-col :span="6">
       <img src="../assets/imgs/设置.png" alt="" class="header-img" />
     </el-col>
     <el-col :span="6" class="text">我</el-col>
     <el-col :span="6">
       <img src="../assets/imgs/邮箱.png" alt="" class="header-img" />
     </el-col>
   </el-row>
 </el-header>
 
 
 <div class="avatar-container">
   <el-row type="flex" justify="start" align="middle" class="avatar-row">
     <el-col :span="6" class="avatar-item">
       <img :src="userInfo.avatar" alt="头像" class="avatar-image" />
     </el-col>
     <el-col :span="12" class="avatar-item username-id">
       <p class="username">{{ userInfo ? userInfo.username : '用户名' }}</p>
       <p class="userid">{{ userInfo ? userInfo.user_id : 'UserID' }}</p>
     </el-col>
     <el-col :span="6" class="avatar-item pointer-container">
       <span class="pointer">&gt;</span>
     </el-col>
   </el-row>
 </div>
 
 
 <div class="info">
     <el-row type="flex" justify="space-around" align="middle">
       <el-col :span="6" class="info-col">
         <div>0</div>
         <div>动态</div>
       </el-col>
       <el-col :span="6" class="info-col">
         <div>0</div>
         <div>关注</div>
       </el-col>
       <el-col :span="6" class="info-col">
         <div>0</div>
         <div>粉丝</div>
       </el-col>
       <el-col :span="6" class="info-col">
         <div>0</div>
         <div>悦力值</div>
       </el-col>
     </el-row>
   </div>
 
 
   <div class="buttons">
     <el-row type="flex" justify="center" align="middle">
       <el-col :span="24" class="button-col">
         <el-button class="huiyuan" circle>
           <img src="../assets/imgs/会员.jpg" alt="会员" class="button-image" />
         </el-button>
       </el-col>
     </el-row>
     <el-row type="flex" justify="center" align="middle">
       <el-col :span="24" class="button-col">
         <el-button class="heima" circle>
           <img src="../assets/imgs/黑马.jpg" alt="黑马" class="button-image" />
         </el-button>
       </el-col>
     </el-row>
   </div>
   
 
   <div class="schedules">
     <el-row type="flex" justify="start" align="middle" class="schedules-row">
       <el-col :span="4" class="schedules-item">
         <img src="../assets/imgs/勋章.png" alt="勋章" class="level" />
       </el-col>
       <el-col :span="16" class="schedules-item schedules-id">
         <p class="leve">初级跑者</p>
         <p class="total">累计跑步0.00km</p>
       </el-col>
       <el-col :span="4" class="schedules-item pointers-container">
         <span class="pointers">查看记录&gt;</span>
       </el-col>
     </el-row>
   </div>
 
 
   <div class="liang">
     <el-row type="flex" justify="space-around" align="middle">
       <el-col :span="11" class="liang-item">
         <el-button class="liang-button">
           <img src="../assets/imgs/我的跑鞋.jpg" alt="我的跑鞋" class="liang-image" />
         </el-button>
       </el-col>
       <el-col :span="11" class="liang-item">
         <el-button class="liang-button">
           <img src="../assets/imgs/值得入手.jpg" alt="值得入手" class="liang-image" />
         </el-button>
       </el-col>
     </el-row>
   </div>
 
 
 
 
   <div class="my">
     <h3 class="title">我的</h3>
     <div class="pailie">
       <el-row type="flex" justify="center" align="middle">
         <el-col :span="4" v-for="(item, index) in items" :key="index" class="item-col">
           <el-button class="item-button">
             <img :src="item.src" alt="" class="item-image" />
           </el-button>
           <div class="item-text">{{ item.text }}</div>
         </el-col>
       </el-row>
     </div>
     </div>
 
     <div class="static">
         <img src="../assets/imgs/静态.jpg" alt="">
     </div>
 
 
 
     <div id="app">
     <el-row :gutter="20"> <!-- gutter 属性用于设置列之间的间距 -->
       <el-col :span="24">
         <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-caogaoxiang"></i>
               <span class="text">草稿箱</span>
             </div>
             <span class="text1">&gt;</span>
           </div>
         </el-button>
       </el-col>
       <el-col :span="24">
         <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-shebeibangding"></i>
               <span class="text">设备绑定</span>
             </div>
             <span class="text1">&gt;</span>
           </div>
         </el-button>
       </el-col>
       <el-col :span="24">
         <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-qianbao"></i>
               <span class="text">钱包</span>
             </div>
             <span class="text1">&gt;</span>
           </div>
         </el-button>
       </el-col>
     </el-row>
   </div>
 
 <hr>
 
 <div id="app">
     <el-row :gutter="20"> <!-- gutter 属性用于设置列之间的间距 -->
       <el-col :span="24">
         <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-icon"></i>
               <span class="text">日历</span>
             </div>
             <span class="text1">&gt;</span>
           </div>
         </el-button>
       </el-col>
       <el-col :span="24">
         <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-huiyuan"></i>
               <span class="text">会员</span>
             </div>
             <span class="text1">&gt;</span>
           </div>
         </el-button>
       </el-col>
       <el-col :span="24">
         <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-baomingka"></i>
               <span class="text">报名卡</span>
             </div>
             <span class="text1">可用于 线下赛事/线上马/跑团活动等&gt;</span>
           </div>
         </el-button>
       </el-col>
     </el-row>
   </div>
    <hr>
    <el-button style="width:100%;">
           <div class="button-content">
             <div class="item">
               <i class="iconfont icon-lianxikefu"></i>
               <span class="text">联系客服</span>
             </div>
             <span class="text1">&gt;</span>
           </div>
         </el-button>
 
 </template>
   
   <script setup>
   import { ref, onMounted } from 'vue';
   import { getUserInfo } from '@/utils/auth';
 import activity from '../assets/imgs/活动.png';
 import event from '../assets/imgs/赛事.png';
 import route from '../assets/imgs/路线.png';
 import runGroup from '../assets/imgs/跑团.png';
 import order from '../assets/imgs/订单.png';
 
 const userInfo = ref(0);

onMounted(() => {
  userInfo.value = getUserInfo();
  console.log("2222222", userInfo.value)
});

 const items = [
   { src: activity, text: '活动' },
   { src: event, text: '赛事' },
   { src: route, text: '路线' },
   { src: runGroup, text: '跑团' },
   { src: order, text: '订单' },
 ]; 
   </script>
   
   <style scoped>
 
  
 
 .header {
   background-color: #fff;
   padding: 0 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
   height: 60px;
   display: flex;
   align-items: center;
   position: relative;
 }
 
 .fixed-top {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
 }
 
 .header-row {
   width: 100%;
   margin: 0;
 }
 
 .header-item {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 
 .header-img {
   max-height: 30px;
 }
 
 .text {
   text-align: center;
 }
 
 .avatar-container {
   background-color: #f5f5f5; /* 可以根据需要调整背景色 */
   padding: 10px 20px; /* 减少内边距 */
   margin-top: 60px; /* 与固定头部保持距离 */
   max-width: 600px; /* 设置最大宽度 */
   margin-left: auto;
   display: flex;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .1); /* 添加阴影效果 */
   height: 50px; /* 降低高度 */
 }
 
 .avatar-row {
   width: 100%;
   margin: 0;
   height: 100%; /* 使行元素占据整个容器高度 */
 }
 
 
 
 .avatar-image {
     width: 50px;
     height: 50px;
   border-radius: 50%; /* 圆形头像 */
 }
 
 .username-id {
   flex-direction: column;
   /* text-align: left; */
   /* 靠左对齐 */
   justify-content: center;
   /* 垂直居中 */
   align-items: center;
   /* 竖直方向居中 */
   padding-left: 10px;
   
   
 }
 
 .username {
   font-size: 14px; /* 降低字体大小 */
   font-weight: bold;
   padding-bottom: 2px;
   margin: 0; /* 去除默认的外边距 */
 }
 
 .userid {
   font-size: 12px; /* 降低字体大小 */
   color: #999;
   margin: 0; /* 去除默认的外边距 */
 }
 
 .pointer-container {
   justify-content: flex-end;
   /* margin-left: auto; 确保指针符号在最右边 */
   /* 将指针放在最右边 */
   display: flex;
   /* 垂直居中 */
   align-items: center;
 }
 
 .pointer {
   font-size: 18px; /* 降低指针符号大小 */
   color: #999;
  
 }
 
 
 .info {
   background-color: #fff;
   padding: 20px;
   margin-top: 10px; /* 与上一个模块保持距离 */
   box-shadow: 0 2px 4px rgba(0, 0, 0, .1); /* 添加阴影效果 */
 }
 
 .info-col {
   text-align: center;
 }
 
 
 .buttons {
   margin-top: 20px; /* 与上一个模块保持距离 */
 }
 
 .button-col {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px; /* 使按钮之间有间距 */
 }
 
 .huiyuan, .heima {
   padding: 0;
   border: none;
   background-color: transparent;    
 }
 
 .button-image {
   width: 90vw; /* 调整图片大小 */
   height: 50px;
 }
 
 .schedules {
   height: 50px;
   display: flex;
   align-items: center;
   border: #111010 solid 1px;
   margin-top: 1px; /* 与上一个模块保持距离 */
 }
 
 .schedules-row {
   width: 100%;
   margin: 0;
   height: 100%; /* 使行元素占据整个容器高度 */
   display: flex;
   align-items: center; /* 垂直居中 */
 }
 
 .schedules-item {
   display: flex;
   align-items: center;
   height: 100%; /* 使子元素占据整个高度 */
 }
 
 .level {
   width: 30px;
   height: 30px;
   border-radius: 50%; /* 圆形头像 */
   margin-right: 10px;
 }
 
 .schedules-id {
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: left; /* 使内容向左对齐 */
   margin-right: 0; /* 不需要居中 */
 }
 
 .leve {
   line-height: 25px;
   font-weight: bold;
   margin: 0; /* 去除默认的外边距 */
 }
 
 .total {
   line-height: 25px;
   color: #666;
   font-size: 1em;
   margin: 0; /* 去除默认的外边距 */
 }
 
 .pointers-container {
   display: flex;
   justify-content: flex-end; /* 将内容推到最右边 */
   align-items: center; /* 垂直居中 */
   white-space: nowrap; /* 防止内容换行 */
 }
 
 .pointers {
   font-size: 1em;
   color: #999;
 }
 
 
 
 
 .liang {
   margin-top: 20px; /* 与上一个模块保持距离 */
 }
 
 .liang-item {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .liang-button {
   padding: 0;
   border: none;
   background-color: transparent;
   width: 100%; /* 使按钮占据整个列宽 */
   height: 100%; /* 使按钮占据整个列高 */
 }
 
 .liang-image {
   width: 100%; /* 使图片占据按钮的整个宽度 */
   height: auto; /* 保持图片的宽高比 */
 }
 
 
 .my {
   margin-top: 20px; /* 与上一个模块保持距离 */
 }
 
 .title {
   text-align: center;
   margin-bottom: 20px;
 }
 
 .pailie {
   margin: 0 20px; /* 两侧留出一些空间 */
 }
 
 .item-col {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0 5px; /* 使列之间有间距 */
 }
 
 .item-button {
   padding: 0;
   border: none;
   background-color: transparent;
   width: 100%; /* 使按钮占据整个列宽 */
   height: 100%; /* 使按钮占据整个列高 */
 }
 
 .item-image {
   width: 50px; /* 调整图片大小 */
   height: 50px;
 }
 
 .item-text {
   text-align: center;
   margin-top: 10px; /* 使文字与图片之间有间距 */
   font-size: 14px; /* 调整字体大小 */
 }
 
 
 .static {
     margin-top: 10px;
 
   text-align: center; /* 水平居中 */
 
   height: 80px; /* 使容器高度占满整个视口，可根据需要调整 */
   margin-bottom: 20px;
 
 }
 
 .static img {
     width: 90%;
 }
 
 
 
 .button-content {
   display: flex;
   justify-content: space-between; /* 使内容在水平方向上两端对齐 */
   align-items: center; /* 使内容在垂直方向上居中对齐 */
   width: 100%;
 }
 
 .item {
   display: flex;
   align-items: center; /* 使图标和文本在垂直方向上居中对齐 */
 }
 
 .text {
   margin-left: 10px; /* 可以根据需要调整间距 */
 }
 
 .text1 {
   margin-right: 10px; /* 可以根据需要调整间距 */
 }
   </style>